<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jq-1.12.4.js"></script>
</head>

<body>
    <p style="display: none;">hello</p>
    <div style="opacity: 1; width: 100px;height: 100px;background-color: red;"></div>
    <button class="btn">点击消失</button>
</body>
<script>
    $(function () {
        $("p").fadeIn(1000, "linear", function () {
            console.log("p淡入,显示了")
        })

        $(".btn").click(function () {
            $("p").fadeOut('slow', "linear", function () {
                console.log("p消失了")
            })
            $("div").fadeOut()
        })
    })
</script>

</html>